<template>
  <div class="content-wrapper">
    <div class="content-header">
      <el-page-header @back="goBack" content="表格设计"></el-page-header>
    </div>
    <div class="content-container">
      <el-button
        class="filter-item"
        size="small"
        plain
        round
        icon="el-icon-plus"
        @click="handleCreateTable"
      >
        添加表
      </el-button>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="设计" name="view">
          <div ref="dataTemplate" class="data-template"></div>
        </el-tab-pane>
        <el-tab-pane label="数据" name="data">
          <el-tabs type="border-card">
            <el-tab-pane v-for="(table, index) in tableDatas" :key="index">
              <span slot="label"><i class="el-icon-date"></i>表单{{ index + 1}}</span>
              <el-table
                :data="table.dataCells"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="50">
                </el-table-column>
                <el-table-column
                  label="行"
                  prop="rowOffset"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="跨行"
                  prop="rowSpan"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="列"
                  prop="colOffset"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="跨列"
                  prop="colSpan"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="内容类型"
                  prop="type"
                  width="180">
                </el-table-column>
                <el-table-column
                  label="内容"
                  prop="content"
                  show-overflow-tooltip
                  >
                </el-table-column>
                <el-table-column
                  label="操作"
                  prop="content"
                  width="180">
                  <template slot-scope="{row}">
                    <el-dropdown>
                      <el-button type="text" class="el-icon-more" />
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>预留操作</el-dropdown-item>
                        <el-dropdown-item>双皮奶</el-dropdown-item>
                        <el-dropdown-item>蚵仔煎</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <CreateTable :dialogVisible="dialogVisibleCreateTable" @setTableDatas="setTableDatas"></CreateTable>
    <CreateCell :dialogVisible="dialogVisibleCreateCell" @setTableDatas="setTableDatas"></CreateCell>
  </div>
</template>

<script>
import { initDataTemplate } from '@/utils/dataTemplate'
import { getManufactureRecordTemplate } from '@/api/rs/manufactureRecordTemplate'

import Pagination from '@/components/Pagination'
import CreateTable from '@/views/manufacture/data_template_list/createTable.vue'
import CreateCell from '@/views/manufacture/data_template_list/createCell.vue'

export default {
  components: {
    Pagination,
    CreateTable,
    CreateCell
  },
  data() {
    return {
      activeTab: 'view',
      dialogVisibleCreateTable: undefined,
      dialogVisibleCreateCell: undefined,
      listQuery: null,
      temp: {
        dataTemplateId: null,
        manufactureRecordTemplateId: null
      },
      tableDatas: [],
      sequence: 0,
      updateTableData: null,
      cellData: null
    }
  },
  mounted() {
    console.log(this.$route.params)
    this.temp.manufactureRecordTemplateId = this.$route.params.manufactureRecordTemplateId
    this.init()
  },
  methods: {
    setTableDatas(val){
      this.tableDatas = val
      this.init()
    },
    init() {
      //远程加载初始化数据
      let _this = this
      let createTableHandler = this.handleCreateTable
      let createCellHandler = this.handleCreateCell
      getManufactureRecordTemplate({manufactureRecordTemplateId: this.temp.manufactureRecordTemplateId}).then(res => {
        this.tableDatas = res.data.getDataTemplateResponse.dataTables
        this.temp.dataTemplateId = res.data.dataTemplateId
        this.sequence = this.tableDatas.length + 1
        //初始化数据
        this.$refs.dataTemplate.innerHTML = ""
        let dataTemplate = this.$refs.dataTemplate
        initDataTemplate(dataTemplate, {
          tables: this.tableDatas,
          tableSelectionChange(table) {
            _this.updateTableData = table
            console.log(table, 'table')
            createTableHandler()
          },
          cellSelectionChange(cell) {
            _this.cellData = cell
            createCellHandler()
          }
        })
      })
    },
    goBack() {
      this.$router.push('/manufacture/data_template_list')
    },
    handleCreateTable() {//创建表单数据
      this.dialogVisibleCreateTable = {
          dateTime: new Date().getTime(),
          dialogVisible: true,
          label: this.updateTableData == null?'添加表':"修改表",
          sequence: this.sequence,
          dataTemplateId: this.temp.dataTemplateId,
          updateTableData: this.updateTableData
        }
      this.updateTableData = null
    },
    handleCreateCell() {//创建单元格数据
      console.log(this.cellData, 'this.cellData');
      let saveData = null
      if (this.cellData.table.dataCells.length > 0) {//有单元格
        saveData = this.cellData.table.dataCells.find(item => {
          if (item.colOffset == this.cellData.col && item.rowOffset == this.cellData.row) {
            return true
          }
        })
      }
      // 定义可合并最大的行,取右上角的
      let colMax = this.cellData.table.col - this.cellData.col + 1  //最大长度为表单的列数
      let rowMax = this.cellData.table.row - this.cellData.row + 1  //最大长度为表单的行数
      console.log(this.cellData.table.dataCells, 'this.cellData.table.dataCells')
      console.log(saveData, 'saveData')
      let _this = this
      this.cellData.table.dataCells.forEach(item => {
        //列数大于当前单元格，行数小于当前单元格
        if (item.colOffset > _this.cellData.col && item.rowOffset <= _this.cellData.row) {
          if (item.rowOffset + item.rowSpan - 1 >= _this.cellData.row) {
            let max = item.colOffset - _this.cellData.col
            if (colMax > max) {
              colMax = max
            }
          }
        }


        //行数大于当前单元格，列数小于当前单元格
        if (item.rowOffset > _this.cellData.row && item.colOffset <= _this.cellData.col) {
          if (item.colOffset + item.colSpan - 1 >= _this.cellData.col) {
            let max = item.rowOffset - _this.cellData.row
            if (rowMax > max) {
              rowMax = max
            }
          }
        }
      })

      //计算交叉是否可能有单元格阻挡
      //行列都大于当前单元格的
      let list = this.cellData.table.dataCells.filter(item => {
        if (item.rowOffset > _this.cellData.row && item.colOffset > _this.cellData.col) {
          return item
        }
      })

      //定义最小的
      let minRow = rowMax
      let minCol = colMax
      list.forEach(item => {
        let row = item.rowOffset - _this.cellData.row
        if (row < minRow) {
          minRow = row
        }
        let col = item.colOffset - _this.cellData.col
        if (col < minCol) {
          minCol = col
        }
      })

      console.log(list, 'list')
      console.log(this.cellData.table.dataCells, 'this.cellData.table.dataCells')

      this.dialogVisibleCreateCell = {
        dialogVisible: true,
        label: saveData == null?'添加单元格':'修改单元格',
        dataTableId: this.cellData.table.dataTableId,
        dataTemplateId: this.cellData.table.dataTemplateId,
        saveData: saveData,
        rowOffset: this.cellData.row,
        rowMax: rowMax,
        colOffset: this.cellData.col,
        colMax: colMax,
        minRow: minRow,
        minCol: minCol
      }
    }
  }

}

</script>
